<template>
    <div class="content">
        <ul>
            <li v-for="(item, index) in list" :key="item.id">
                <div>
                    <input
                        type="checkbox"
                        :checked="showchecked[index]"
                        @click="radiocheck(index)"
                    />
                </div>
                <div>
                    <img :src="item.imgsrc" alt="" />
                    <p v-show="item.maxNum == item.num ? true : false" class="current">
                        限购{{ item.maxNum }}件
                    </p>
                </div>
                <div class="miaoshu">
                    <h3>{{ item.name }}</h3>
                    <p>
                        <span>{{ item.info }}</span>
                    </p>
                    <div class="price">
                        <p class="jiage">￥{{ item.price }}</p>
                        <div class="step">
                            <button
                                @click="add(index, -1)"
                                :disabled="item.num == 1 ? !disabled : disabled"
                            >
                                -
                            </button>
                            <span>{{ item.num }}</span>
                            <button
                                @click="add(index, 1)"
                                :disabled="item.maxNum == item.num ? !disabled : disabled"
                            >
                                +
                            </button>
                        </div>
                    </div>
                </div>
                <div class="r">
                    <p @click="deletecart(index)">-</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['list', 'showchecked'],
    data() {
        return {
            checklist: [],
            disabled: false,
        };
    },
    methods: {
        radiocheck(index) {
            console.log(index);
            this.$emit('fn1', index);
        },
        deletecart(index) {
            this.$emit('fn3', index);
        },
        add(index, val) {
            this.$emit('fn4', index, val);
            // this.attr('disabled', true);
        },
    },
};
</script>

<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
.content {
    width: 375px;
    height: 567px;
    margin: 0 auto;
    margin-top: 10px;
    padding: 0 5px;
    ul {
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 5px;
            border-bottom: 1px solid #ccc;
            img {
                height: 90px;
            }
            .current {
                background-color: #f40;
                text-align: center;
            }
            .miaoshu {
                width: 166px;
                h3 {
                    font-weight: bold;
                    font-size: 16px;
                }
                .price {
                    display: flex;
                    justify-content: space-between;
                    .jiage {
                        color: #f40;
                    }
                    .step {
                        button {
                            display: inline-block;
                            width: 22px;
                            height: 22px;
                            border: 1px solid #999;
                            cursor: pointer;
                            text-align: center;
                            vertical-align: top;
                        }
                        span {
                            width: 20px;
                            height: 20px;
                            display: inline-block;
                            border: 1px solid #999;
                            text-align: center;
                        }
                    }
                }
            }
            .r {
                width: 30px;
                p {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: #f40;
                    cursor: pointer;
                    text-align: center;
                }
            }
        }
    }
}
</style>
